﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/map-setting.css" />

    <script>

        $(document).ready(function () {
            var mapCenter = new google.maps.LatLng(47.6145, -122.3418); //Google map Coordinates
            var map;
            map_initialize(); // load map
            function map_initialize() {

                var MapTitle = "Hello GOOGLE MAPS";
                var MapDesc;

                //Google map option
                var googleMapOptions =
                {
                    center: mapCenter, // map center
                    zoom: 17, //zoom level, 0 = earth view to higher value
                    panControl: true, //enable pan Control
                    zoomControl: true, //enable zoom control
                    zoomControlOptions: {
                        style: google.maps.ZoomControlStyle.SMALL //zoom control size
                    },
                    scaleControl: true, // enable scale control
                    mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
                };
                map = new google.maps.Map(document.getElementById("google_map"), googleMapOptions);

                //##### drop a new marker on right click ######
                google.maps.event.addListener(map, 'rightclick', function (event) {
                    var EditForm = '<p><div class="marker-edit">' +
                          '<form action="null" method="POST" name="SaveMarker" id="SaveMarker">' +
                          '<label for="pName"><span>Place Name :</span><input type="text" name="pName" class="save-name" placeholder="Enter Title" maxlength="40" /></label>' +
                          '<label for="pDesc"><span>Description :</span><textarea name="pDesc" class="save-desc" placeholder="Enter Address" maxlength="150"></textarea></label>' +
                          '<label for="pType"><span>Type :</span> <select name="pType" class="save-type"><option value="modelTown">MODEL TOWN</option><option value="dha">DHA</option>' +
                          '<option value="gardenTown">Garden Town</option></select></label>' +
                          '</form>' +
                          '</div></p><button name="save-marker" class="save-marker">Save Marker Details</button>';

                    addMarker(event.latLng, MapTitle, EditForm, false, true, true, "css/images/pin_green.png");
                });
            };


            // Function for adding a marker to the page.
            function addMarker(MapPos, MapTitle, MapDesc, InfoOpenDefault, DragAble, Removable, iconPath) {
                var marker = new google.maps.Marker({
                    position: MapPos,
                    map: map,
                    draggable: DragAble,
                    animation: google.maps.Animation.DROP,
                    title: MapTitle,
                    icon: iconPath
                });

                //Content structure of info Window for the Markers
                var contentString = $('<div class="marker-info-win">' +
                '<div class="marker-inner-win"><span class="info-content">' +
                '<h1 class="marker-heading">' + MapTitle + '</h1>' +
                MapDesc +
                '</span><button name="remove-marker" class="remove-marker" title="Remove Marker">Remove Marker</button>' +
                '</div></div>');


                //Create an infoWindow
                var infowindow = new google.maps.InfoWindow();
                //set the content of infoWindow
                infowindow.setContent(contentString[0]);

                //Find remove button in infoWindow
                var removeBtn = contentString.find('button.remove-marker')[0];

                //Find save button in infoWindow
                var saveBtn = contentString.find('button.save-marker')[0];

                //add click listner to remove marker button
                google.maps.event.addDomListener(removeBtn, "click", function (event) {
                    //call remove_marker function to remove the marker from the map
                    //remove_marker(marker);
                    marker.setMap(null);
                });

                if (typeof saveBtn !== 'undefined') //continue only when save button is present
                {
                    //add click listner to save marker button
                    google.maps.event.addDomListener(saveBtn, "click", function (event) {
                        var mReplace = contentString.find('span.info-content'); //html to be replaced after success
                        var mName = contentString.find('input.save-name')[0].value; //name input field value
                        var mDesc = contentString.find('textarea.save-desc')[0].value; //description input field value
                        var mType = contentString.find('select.save-type')[0].value; //type of marker

                        if (mName == '' || mDesc == '') {
                            alert("Please enter Name and Description!");
                        } else {
                            //call save_marker function and save the marker details
                            //save_marker(marker, mName, mDesc, mType, mReplace);
                            alert("SAVED!");
                        }
                    });
                }

                //add click listner to save marker button
                google.maps.event.addListener(marker, 'click', function () {
                    infowindow.open(map, marker); // click on marker opens info window
                });

                if (InfoOpenDefault) //whether info window should be open by default
                {
                    infowindow.open(map, marker);
                }

            }


        });
    </script>


</head>
<body>
    <div id="google_map"></div>
</body>
</html>